<template>
  <view class="content">

    <view
      class="uni-list-cell"
      :class="border"
      @click="eventClick"
      hover-class="cell-hover"
      :hover-stay-time="50"
    >
      <text
        v-if="icon"
        class="cell-icon template__icon"
        :style="[{
					color: iconColor,
				}]"
        :class="icon"
      ></text>
      <text class="cell-tit clamp">{{title}}</text>
      <text
        v-if="tips"
        class="cell-tip"
      >{{tips}}</text>
      <uni-icon
        name="right"
        size="36rpx"
        color="#979797"
      >
      </uni-icon>
    </view>

  </view>
</template>
 
<script>
import uniIcon from "@/components/uniIcon/uniIcon";
export default {
  components: {
    uniIcon
  },
  data() {
    return {
      typeList: {
        left: "icon-zuo",
        right: "icon-right",
        up: "icon-shang",
        down: "icon-xia"
      }
    };
  },
  props: {
    icon: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "标题"
    },
    tips: {
      type: String,
      default: ""
    },
    navigateType: {
      type: String,
      default: "right"
    },
    border: {
      type: String,
      default: "b-b"
    },
    hoverClass: {
      type: String,
      default: "cell-hover"
    },
    iconColor: {
      type: String,
      default: "#333"
    }
  },
  methods: {
    eventClick() {
      this.$emit("eventClick");
    }
  }
};
</script>

<style lang='scss'>
.icon .uni-list-cell.b-b:after {
  left: 90rpx;
}
.uni-list-cell {
  display: flex;
  align-items: center;
  padding: 18rpx 0;
  line-height: 60rpx;
  position: relative;
  font-size: 28rpx;
  color: #4d4d4d;
  &.cell-hover {
    background: #fafafa;
  }
  &.b-b:after {
    left: 30rpx;
  }

  .cell-icon {
    font-size: 40rpx !important;
  }
  .cell-more {
    align-self: center;
  }
  .cell-tit {
    flex: 1;
    font-size: 28rpx;
    color: $theme-color-main-base;
    margin-left: 16rpx;
  }
  .cell-tip {
    font-size: 28rpx;
    color: #4d4d4d;
  }
}
</style>
